<template>
<div class="first" @click="onClick">
    <div >
    <img :src=item.image alt="">
    </div>
    <div class="price">{{item.price}}</div>
    <div class="dis">
   {{item.description}}
    </div>
    <div class="comment">
        {{item.comment}}
    </div>
    <div class="self">
    <Tag color="error">自营</Tag>
    </div>
    <div>
        {{item.id}}
    </div>
</div>
</template>


<script>
import {mapState} from 'vuex'
    export default{
        name:'Product',
        props:['item'],
        methods:{
            onClick(){
                this.$router.push({path:"/details",query:{id:this.item.id}})
            }
        }
    }
    
</script>


<style lang="scss" scoped>
.img{
    width: 220px;
}
.first{
    width:220px;
    margin-left:150px
}
.dis,.price,.comment.self{
    text-align:left
}
.price{
    color: red;
    text-align: left;
    font-size: 25px;
}


</style>
